<template>
  <div class="main">
    <div class="banner">
      <swiper class="swiper" :options="swiperOption" ref="meSwiper">
        <swiper-slide><img src="../static/banner-1.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../static/banner-2.png" alt="" /></swiper-slide>
        <swiper-slide><img src="../static/banner-3.png" alt="" /></swiper-slide>
        <div class="swiper-pagination1" slot="pagination"></div>
        <div class="swiper-button-prev" slot="button-prev"></div>

        <div class="swiper-button-next" slot="button-next"></div>
      </swiper>
      <div class="announceshow">
        <div class="announce">
          <div class="annoheader">
            <img src="../static/anon.png" alt="" />
          </div>
          <div id="PackagingShell" class="PackagingShell">
            <div id="viewBox">
              <span id="marquee">饰品机器人21年2月迭代通知</span>
              <span id="transcript"></span>
            </div>
            <div id="hide">饰品机器人21年2月迭代通知</div>
          </div>
          <span class="close"></span>
        </div>
      </div>
    </div>
    <div class="typeList">
      <div
        class="rightBorder"
        style="width: 20%"
        v-for="(item, index) in rightBorders"
        :key="index"
      >
        <div class="typeItem">
          <div class="typeTitle">
            <img :src="item.imgUrl" alt="" />
            <span>
              {{ item.name }}
            </span>
          </div>
          <div>
            {{ item.depict }}
          </div>
        </div>
      </div>
    </div>
    <div class="hotBot">
      <div class="hotBotMain">
        <div class="itemTitle">
          <div class="mainTitle">
            <div class="line"></div>
            <div class="centerTitle">热门BOT</div>
            <div class="line"></div>
          </div>
          <div class="subTitle">Hot BOT</div>
        </div>
        <div class="botList">
          <router-link
            :to="{
              path: 'botDetail',
              query: { id: item.id },
            }"
            tag="div"
            class="hotBotItem"
            v-for="(item, index) in hotBotItems"
            :key="index"
          >
            <img :src="item.imgUrl" alt="" />
            <p title="Steam礼物机器人-淘宝版" class="botTitle">
              {{ item.name }}
            </p>
            <p title="" class="botContant">
              {{ item.depict }}
            </p>
          </router-link>
        </div>
        <router-link tag="div" to="hotBot" class="seeMore">
          <span>查看更多</span>
          <span class="rightArrow"></span>
        </router-link>
      </div>
    </div>
    <div class="chooseUs">
      <div class="chooseUsMain">
        <div class="itemTitle">
          <div class="mainTitle">
            <div class="line"></div>
            <div class="centerTitle">为什么选择我们？</div>
            <div class="line"></div>
          </div>
          <div class="subTitle">Why choose us</div>
        </div>
        <div class="chooseUsText">
          狸花工坊专注于RPA机器人流程自动化、大数据服务等领域已经9年，拥有大量的经验和技术储备，能够为个人和企业提供一整套解决方案，助力个人/企业在显著降低成本的同时，
          快速高效完成各种流程化作业，为个人/企业利润带来质级提升。
        </div>
        <div class="chooseUsList">
          <div
            class="chooseUsItem"
            v-for="(item, index) in chooseUsItems"
            :key="index"
          >
            <img :src="item.imgUrl" alt="" />
            <p class="title">
              {{ item.name }}
            </p>
            <div class="content">
              <div v-for="(items, index) in item.depict">
                <span class="dot"></span>
                <span>
                  {{ items.txt }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="hot">
      <div class="backTop"></div>
      <div class="backBottom"></div>
      <div class="hotMain">
        <div class="itemTitle">
          <div class="mainTitle">
            <div class="line"></div>
            <div class="centerTitle whiteTitle">热门案例</div>
            <div class="line"></div>
          </div>
          <div class="subTitle">Popular cases</div>
        </div>
        <div>
          <myswiper></myswiper>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="newsMain">
        <div class="itemTitle">
          <div class="mainTitle">
            <div class="line"></div>
            <div class="centerTitle whiteTitle">新闻资讯</div>
            <div class="line"></div>
          </div>
          <div class="subTitle">News</div>
        </div>
        <div class="newsList">
          <router-link
            :to="{
              path: 'newsDetail',
              query: { id: item.id },
            }"
            tag="div"
            class="newsItem"
            v-for="(item, index) in newsItems"
            :key="index"
          >
            <img :src="item.imgUrl" alt="" />
            <div class="mainbox">
              <div class="times">
                <div>
                  <p class="date">{{ item.date }}</p>
                  <p class="year">{{ item.year }}</p>
                </div>
                <div>
                  <img src="../static/weixin.png" alt="" />
                  <img src="../static/weibo.png" alt="" />
                </div>
              </div>
              <div class="newsItemMain">
                <div class="newsTitle">
                  {{ item.name }}
                </div>
                <div class="line"></div>
                <div class="content">
                  <div v-for="items in item.depict">
                    <p>
                      <strong>
                        {{ items.st }}
                      </strong>
                    </p>
                    <p>
                      {{ items.txt }}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </router-link>
        </div>
        <router-link tag="div" to="newsList" class="seeMore">
          <span>查看更多</span>
          <span class="rightArrow"></span>
        </router-link>
      </div>
    </div>
    <div class="customized">
      <div class="customizedMain">
        <div>
          <div class="customizedTitle">
            <img src="../static/bi.png" alt="" />
            <p>BOT申请试用</p>
          </div>
          <div class="trialBot">
            <div class="trialBotList">
              <router-link
                tag="div"
                :to="{
                  path: 'botDetail',
                  query: { id: item.id },
                }"
                v-for="(item, index) in trialBotLists"
                :key="index"
              >
                <img :src="item.imgUrl" alt="" />
                <p>
                  {{ item.name }}
                </p>
              </router-link>
            </div>
            <router-link tag="div" to="hotBot" class="seeMore">
              <span>查看更多</span>
              <span class="rightArrow"></span>
            </router-link>
          </div>
        </div>
        <div>
          <div class="customizedTitle">
            <img src="../static/cu.png" alt="" />
            <p>BOT定制需求提交</p>
          </div>
          <div class="orderCustomized">
            <img src="../static/tiwe.png" alt="" />
            <div class="toOrder">
              <p>如果你有定制需求，欢迎提交，我们立即为您安排工程师对接</p>
              <router-link
                to="demand"
                tag="div"
                class="nav-list-item active toOrderBtn"
                >立即提交</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Myswiper from "./Myswiper.vue";

export default {
  name: "swiper-example-loop",
  title: "Loop mode / Infinite loop",
  components: {
    Swiper,
    SwiperSlide,
    Myswiper,
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
          el: ".swiper-pagination1",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        autoplay: true,
      },
      computed: {
        swiper() {
          return this.$refs.meSwiper.swiper;
        },
      },
      rightBorders: [
        {
          name: "游戏Bot",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FgMT52IfkUTD-xDvjx2j3Nsqcgf9",
          depict: "商人与玩家的自动化助手，省时省力又省心",
        },
        {
          name: "电商BOT",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FgMT52IfkUTD-xDvjx2j3Nsqcgf9",
          depict: "智能高效管理商品，开启购物抢单模式",
        },
        {
          name: "办公BOT",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FgMT52IfkUTD-xDvjx2j3Nsqcgf9",
          depict: "基于深度学习算法，模仿真人完成流程化任务",
        },
        {
          name: "量化BOT",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FgMT52IfkUTD-xDvjx2j3Nsqcgf9",
          depict: "对接数据源设定策略，基于大数据分析给出建议",
        },
        {
          name: "定制BOT",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FgMT52IfkUTD-xDvjx2j3Nsqcgf9",
          depict: "专业定制各类RPA机器人，流程自动化",
        },
      ],
      hotBotItems: [
        {
          id: 200001,
          name: "Steam礼物机器人-淘宝版",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
          depict:
            "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
        },
        {
          id: 200002,
          name: "Steam礼物机器人-激活码版",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
          depict:
            "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
        },
        {
          id: 200003,
          name: "Steam饰品机器人-淘宝版",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
          depict:
            "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
        },
        {
          name: "Steam礼物机器人-淘宝版",
          imgUrl:
            "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
          depict:
            "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
        },
      ],
      chooseUsItems: [
        {
          name: "可靠",
          imgUrl: require("@/static/kekao.png"),
          depict: [
            { txt: "提供高效及时的售后保障" },
            { txt: "持续迭代/不断优化" },
            { txt: "专职售后为你解决问题" },
            { txt: "完善的帮助文档为你答疑" },
          ],
        },
        {
          name: "稳定",
          imgUrl: require("@/static/kekao.png"),
          depict: [
            { txt: "提供高效及时的售后保障" },
            { txt: "持续迭代/不断优化" },
            { txt: "专职售后为你解决问题" },
            { txt: "完善的帮助文档为你答疑" },
          ],
        },
        {
          name: "安全",
          imgUrl: require("@/static/kekao.png"),
          depict: [
            { txt: "提供高效及时的售后保障" },
            { txt: "持续迭代/不断优化" },
            { txt: "专职售后为你解决问题" },
            { txt: "完善的帮助文档为你答疑" },
          ],
        },
      ],
      newsItems: [
        {
          id: 40001,
          name: "2021年，海盗海春节放假通知",
          imgUrl: require("@/static/news.png"),
          date: "3-11",
          year: "2021",

          depict: [
            { st: "尊敬的海盗海用户：" },
            {
              txt:
                "根据国家法定假期日规定，结合我司实际情况，对2021年春节放假做如下安排：",
            },
          ],
        },
        {
          name: "2021年，海盗海春节放假通知",
          imgUrl: require("@/static/news.png"),
          date: "3-11",
          year: "2021",

          depict: [
            { st: "尊敬的海盗海用户：" },
            {
              txt:
                "根据国家法定假期日规定，结合我司实际情况，对2021年春节放假做如下安排：",
            },
          ],
        },
        {
          name: "2021年，海盗海春节放假通知",
          imgUrl: require("@/static/news.png"),
          date: "3-11",
          year: "2021",

          depict: [
            { st: "尊敬的海盗海用户：" },
            {
              txt:
                "根据国家法定假期日规定，结合我司实际情况，对2021年春节放假做如下安排：",
            },
          ],
        },
      ],
      trialBotLists: [
        {
          id: 200001,
          name: "Steam饰品机器人-淘宝版",
          imgUrl: require("@/static/bot-1.png"),
        },
        {
          name: "Steam饰品机器人-淘宝版",
          imgUrl: require("@/static/bot-1.png"),
        },
        {
          name: "Steam饰品机器人-淘宝版",
          imgUrl: require("@/static/bot-1.png"),
        },
        {
          name: "Steam饰品机器人-淘宝版",
          imgUrl: require("@/static/bot-1.png"),
        },
        {
          name: "Steam饰品机器人-淘宝版",
          imgUrl: require("@/static/bot-1.png"),
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "~@co/common.less";
</style>
<style>
.swiper-pagination1 {
  text-align: center;
  position: relative;
  z-index: 1;
}
/* .swiper-pagination1 .my-bullet {
  width: 20px;
} */
/* .swiper-pagination1 > .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 5px;
  opacity: 1;
} */
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 50px;
  width: 100%;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  > .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 5px;
  opacity: 1;
}
.swiper-container-horizontal
  > .swiper-pagination-bullets
  > .swiper-pagination-bullet-active {
  width: 20px;
}
</style>
